<template>
    <div class="panel-title">
        <div :style="{ backgroundImage: 'url(' + image + ')' }" class="left-before"></div>
        <div class="left">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "PanelBoxTitle",

    props: {
        image: {
            type: String,
            default() {
                return "";
            },
        },
    },

    // data() {
    //     return {
    //         image: require("@/asset/image/panel-pic-one.png"),
    //     };
    // },
};
</script>

<style lang="scss" scoped>
.panel-title {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    color: #ffffff;
    height: 42px;
    width: 378px;
    margin-bottom: 5px;
    text-shadow: 1px 1px 5px rgba(43, 240, 242, 0.5);

    .left-before {
        content: "";
        display: inline-block;
        width: 28px;
        height: 28px;
        background: #fcfdae;
        margin-top: 5px;
        background: no-repeat center center/100% 100%;
    }

    .left {
        width: 344px;
        line-height: 39px;
        background: rgba(31, 144, 251, 0.12);
        padding: 0 0 0 16px;
        background: url("~@/asset/image/panel-title.png") no-repeat center center/100% 100%;
    }
}
</style>
